<script setup lang="ts">
import { usePermissionStore } from '@/store/modules/permission'
import { useRouter } from 'vue-router'
import { useI18n } from '@/hooks/web/useI18n'
import Img from '@/assets/svgs/404.svg'
import { ElButton } from 'element-plus'

const { push } = useRouter()

const permissionStore = usePermissionStore()
const { t } = useI18n()
const btnClick = () => {
  push(permissionStore.addRouters[0]?.path as string)
}
</script>

<template>
  <div class="flex justify-center">
    <div class="text-center">
      <img width="350" :src="Img" alt="" />
      <div class="text-14px text-[var(--el-color-info)]">{{ t('error.pageError') }}</div>
      <div class="mt-20px">
        <ElButton type="primary" @click="btnClick">{{ t('error.returnToHome') }}</ElButton>
      </div>
    </div>
  </div>
</template>
